<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="../js/flv.min.js"></script>
		<title>Document</title>
		<style>
			body {
				margin: 0;
			}
			.popup {
				width: 550px;
				background-color: rgba(0, 0, 0, 0.5);
				border: 2px solid rgba(2, 171, 255, 0.8);
			}
			header {
				padding-left: 30px;
				display: flex;
				align-items: center;
				font-size: 26px;
				background: linear-gradient(270deg, rgba(5, 63, 113, 0) 0%, rgba(2, 171, 255, 0.6) 100%);
				height: 70px;
				line-height: 100px;
				color: #fff;
			}
			header::before {
				display: block;
				width: 26px;
				height: 26px;
				content: '';
				background-color: #02abff;
				border-radius: 50%;
				margin-right: 15px;
			}
			.content {
				display: flex;
				padding: 20px 0px;
				justify-content: space-around;
			}
			img {
				width: 200px;
				height: 260px;
			}
			video {
				width: 200px;
				height: 260px;
				object-fit: cover;
			}
			.content .item {
				display: flex;
				align-items: center;
			}
			.desc {
				width: 300px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.content .item:nth-child(n + 2) {
				margin-top: 3px;
			}
			.content .item .key {
				width: 120px;
				font-size: 20px;
				color: #fff;
			}
			.value {
				font-size: 20px;
				background: rgba(2, 171, 255, 0.1);
				flex: 1;
				box-shadow: inset 0px 0px 4px 0px rgba(51, 255, 247, 0.8);
				margin-left: 0px;
				padding: 5px 5px;
				color: #fff;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="popup">
			<header>设备信息</header>
			<div class="content">
				<img src="./img/demo.png" alt="" class="eqImg" />
				<video id="flvVideo" class="eqVideo" alt="" controls muted></video>
				<!-- <video src="./img/demo.mp4" alt="" class="eqVideo" autoplay loop controls></video> -->
				<div class="desc">
					<div class="item">
						<div class="key">平均速度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
					<div class="item">
						<div class="key">客流密度:</div>
						<div class="value">哈哈哈哈</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			// document.addEventListener('DOMContentLoaded', () => {
			// 	// 检查浏览器是否支持 flv.js
			// 	if (flvjs.isSupported()) {
			// 		// FLV 流的 URL（可以是 HTTP-FLV 或 WebSocket-FLV）
			// 		const videoUrl = '/flv-api/live/1.flv';
					
			// 		// 创建 flv.js 播放器实例
			// 		const flvPlayer = flvjs.createPlayer({
			// 			type: 'flv',       // 播放格式
			// 			url: videoUrl,     // 视频流地址
			// 			isLive: true       // 是否为直播流（如果是直播需设置为 true）
			// 		});
					
			// 		// 关联 video 元素
			// 		flvPlayer.attachMediaElement(document.getElementById('flvVideo'));
					
			// 		// 加载并播放
			// 		flvPlayer.load();
			// 		flvPlayer.play();
			// 		flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
			// 			alert('播放错误: '+ errType + "====" + errDetail);
			// 		});
			// 	} else {
			// 		alert('当前浏览器不支持 FLV 播放！');
			// 	}
			// });
			document.addEventListener('DOMContentLoaded', () => {
				const queryString = window.location.search
				const urlParams = new URLSearchParams(queryString)
				const info = JSON.parse(urlParams.get('info'))
				// const videoUrl = JSON.parse(urlParams.get('imgs'))
				// console.log("info", JSON.parse(info));
				const attrBody = document.querySelector('.desc')
				console.log('属性弹框', info)
				let str = ''
				for (let key in info) {
					if (key != "flvUrl") {
						str += `<div class="item">
							<div class="key">${key}:</div>
							<div class="value">${info[key]}</div>
							</div>`
					}
				}
				attrBody.innerHTML = str
				// const title = urlParams.get('title')
				// // document.querySelector('.e-name').innerText = equipmentName
				// document.querySelector('.b-name').innerText = title
				const img = urlParams.get('img')
				if (img.includes('flv')) {
					// document.querySelector('.eqVideo').src = img
					document.querySelector('.eqVideo').style.display = 'block'
					document.querySelector('.eqImg').style.display = 'none'
					document.querySelector('header').innerHTML = '监控视频'
					// 检查浏览器是否支持 flv.js
					if (flvjs.isSupported()) {
						// FLV 流的 URL（可以是 HTTP-FLV 或 WebSocket-FLV）
						const videoUrl = img;
						// const videoUrl = 'http://192.168.0.80:8080/live/1.flv';
						
						// 创建 flv.js 播放器实例
						const flvPlayer = flvjs.createPlayer({
							type: 'flv',       // 播放格式
							url: videoUrl,     // 视频流地址
							isLive: true,       // 是否为直播流（如果是直播需设置为 true）
							enableWorker: true, // 启用 Web Worker
							enableStashBuffer: true, // 启用缓冲池
							stashInitialSize: 512, // 初始缓冲大小（KB）
							lazyLoad: false
						});
						
						// 关联 video 元素
						flvPlayer.attachMediaElement(document.getElementById('flvVideo'));
						
						// 加载并播放
						flvPlayer.load();
						flvPlayer.play();
						
						// 错误监听
						flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
							console.error('播放错误: '+ errType + "====" + errDetail);
						});
					} else {
						alert('当前浏览器不支持 FLV 播放！');
					}
				} else {
					document.querySelector('.eqImg').src = img
					document.querySelector('.eqImg').style.display = 'block'
					document.querySelector('.eqVideo').style.display = 'none'
				}
			})
		</script>
	</body>
</html>
